<template>
  <div class="app-container">
    <!-- 主要内容区域 -->
    <div class="main-content">
      <router-view></router-view>
    </div>
    
    <!-- 底部导航栏 -->
    <van-tabbar v-model="active" route>
      <van-tabbar-item replace to="/home" icon="home-o">
        首页
      </van-tabbar-item>
      <van-tabbar-item replace to="/first" icon="fire-o">
        首发
      </van-tabbar-item>
      <van-tabbar-item replace to="/discover" icon="search">
        发现
      </van-tabbar-item>
      <van-tabbar-item replace to="/user" icon="user-o">
        我的
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { tim, TIM } from '@/tim'

const active = ref(0)
const currentUserID = ref('')

onMounted(async () => {
  try {
    // 等待 SDK ready
    await new Promise((resolve, reject) => {
      // 监听 SDK ready 事件
      const onReady = () => {
        tim.off(TIM.EVENT.SDK_READY, onReady)
        tim.off(TIM.EVENT.SDK_NOT_READY, onError)
        resolve()
      }
      
      const onError = () => {
        tim.off(TIM.EVENT.SDK_READY, onReady)
        tim.off(TIM.EVENT.SDK_NOT_READY, onError)
        reject(new Error('SDK not ready'))
      }

      tim.on(TIM.EVENT.SDK_READY, onReady)
      tim.on(TIM.EVENT.SDK_NOT_READY, onError)
    })
    
    const profile = await tim.getMyProfile()
    currentUserID.value = profile.data?.userID || ''
  } catch (error) {
    console.error('获取用户信息失败:', error)
  }
})
</script>

<style scoped>
.app-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  overflow-y: auto;
  position: relative;
}

:deep(.van-tabbar) {
  border-top: 1px solid #f7f7f7;
}

:deep(.van-tabbar-item) {
  color: #999;
}

:deep(.van-tabbar-item--active) {
  color: #1989fa;
}
</style> 